<script>
    import dayjs from "dayjs";
    import relativeTime from "dayjs/plugin/relativeTime";
    import "dayjs/locale/zh-cn";
    import config from "../routes/_config";
    dayjs.extend(relativeTime);
    dayjs.locale("zh-cn");
    export let movie;
    let category = "影视剧";
    $: {
        for (let index = 0; index < movie.types.length; index++) {
            const type = movie.types[index];
            switch (type.tag) {
                case "漫画":
                    category = "漫画";
                    break;
                case "游戏":
                    category = "游戏";
                    break;
                case "动画":
                    category = "动画";
                    break;
                default:
                    category = "影视剧";
                    break;
            }
            if (category != "影视剧") {
                break;
            }
        }
    }
</script>

<div class="card card-video shadow mb-2 mb-md-4 border-bottom-primary">
    <div class="card-header box-header py-3">
        <h6 class="m-0">{category}</h6>
    </div>
    <div class="card-image overflow-hidden" style="--aspect-ratio:16/9;">
        <img
            class="img card-img"
            alt={movie.title}
            src="{config.imgHost}/uploads/400/{movie.img}"
        />
    </div>
    <div class="card-body box-body">
        <a
            href="/movie/{movie._id}"
            class="stretched-link text-decoration-none"
            title={movie.title}
        >
            <h5 class="box-title card-title text-truncate text-decoration-none">
                {movie.title}
            </h5>
        </a>
        <div class="video_tags mb-md-3 mb-0">
            {#if movie.types}
                {#each movie.types as tag}
                    <span class="tag bg-secondary text-white">{tag.tag}</span>
                {/each}
            {/if}
        </div>
        <div
            class="d-none d-md-flex justify-content-between align-items-center"
        >
            <div class="d-flex align-items-center create-time">
                <i class="far fa-calendar-alt mr-1" />
                {dayjs().from(dayjs(movie.meta.updateAt))}
            </div>
        </div>
    </div>
</div>

<style>
    [style*="--aspect-ratio"] > :first-child {
        width: 100%;
    }
    [style*="--aspect-ratio"] > img {
        object-fit: cover;
        height: auto;
    }
    @supports (--custom: property) {
        [style*="--aspect-ratio"] {
            position: relative;
        }
        [style*="--aspect-ratio"]::before {
            content: "";
            display: block;
            padding-bottom: calc(100% / (var(--aspect-ratio)));
        }
        [style*="--aspect-ratio"] > :first-child {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
        }
        [style*="--aspect-ratio"] > video {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            height: 100%;
        }
    }
    .card-image {
        /* border-radius: 0.1875rem !important; */
        transition: all 0.2s ease-out;
    }
    .card-img {
        border-radius: 0rem;
    }
    .card-video .video_tags {
        position: relative;
        height: 20px;
        margin-right: -10px;
        margin-bottom: 8px;
        overflow: hidden;
        letter-spacing: -3px;
    }
    .video_tags .tag {
        display: inline-block;
        max-width: 90px;
        margin-right: 8px;
        padding: 0 8px;
        overflow: hidden;
        border-radius: 20px;
        background: #eee;
        color: #333;
        font-size: 12px;
        letter-spacing: normal;
        line-height: 20px;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: top;
        white-space: nowrap;
    }
    .create-time {
        font-size: 0.85rem;
    }
</style>
